<template>
  <n-drawer-content :title="selected.typeName || '字典码值'">
    <n-card>
      <div style="display: flex; justify-content: space-between; margin-bottom: 5px">
        <n-space>
          <n-button size="small" type="primary" @click="openAdd">
            <template #icon>
              <n-icon :component="AddCircleOutline"/>
            </template>
            新增
          </n-button>
        </n-space>
        <n-modal
            title="标题"
            :preset="'dialog'"
            style="width: 800px"
            :mask-closable="false"
            positiveText="提交"
            negativeText="取消"
            :show-icon="false"
            @positive-click="onSubmit"
            v-model:show="showAdd"
        >
          <n-form
              ref="addFormRef"
              :model="modalForm"
              :inline="false"
              :rules="rules"
          >
            <n-grid :cols="24" :x-gap="24">
              <n-form-item-gi :span="12" label="字典代码" path="typeCode">
                <n-input v-model:value="modalForm.dictCode" clearable placeholder="请输入字典代码"/>
              </n-form-item-gi>
              <n-form-item-gi :span="12" label="字典名称" path="typeName">
                <n-input v-model:value="modalForm.dictName" clearable placeholder="请输入字典名称"/>
              </n-form-item-gi>
              <n-form-item-gi :span="12" label="说明" path="remark">
                <n-input v-model:value="modalForm.remark" clearable placeholder="请输入说明"/>
              </n-form-item-gi>
            </n-grid>
          </n-form>
        </n-modal>
      </div>
      <SDataTable
          ref="tableRef"
          type="page"
          :columns="columns"
          @getData="getData"
          :bodyWidth="drawerWidth"
      />
    </n-card>
  </n-drawer-content>
</template>
<script setup>
import SDataTable from "@/components/public/SDataTable.vue";
import {AddCircleOutline} from "@vicons/ionicons5";
import {NButton, NIcon, NSpace} from "naive-ui";
import {addDict,  getDictByTypeCodeList} from "@/api/system/dictApi";
import {ref} from "vue";

const showAdd = ref(false);
const addFormRef = ref();
const tableRef = ref();
const modalForm = ref({
  dictName:'',
  dictCode:'',
  remark:'',
});
const props = defineProps({
  selected:{
    type:Object
  },
  drawerWidth:Number
})
const {selected} = props;
const columns =  [
  {
    title: '字典代码',
    key: 'dictCode',
    width:200,
    ellipsis:true
  },
  {
    title: '字典码值',
    key: 'dictName',
  },
]
const rules = {
  dictName: [
    {
      required: true,
      message: '名称不能为空'
    }
  ],
  dictCode: [
    {
      required: true,
      message: '代码不能为空'
    }
  ],
}
const getData = (callback,page,pageSize)=>{
  const params = {
    typeCode: selected.typeCode
  }
  getDictByTypeCodeList(page,pageSize,params).then(res=>{
    const data = res.data;
    callback(data)
  })
}
const openAdd = ()=>{
  showAdd.value =true
}
const flushedTable = ()=>{
  tableRef.value.getList();
}
const onSubmit = ()=>{
  addFormRef.value?.validate((errors) => {
    if (!errors) {
      const params = {
        ...modalForm.value,
        typeCode: selected.typeCode,
      }
      addDict(params).then(res=>{
        flushedTable()
        showAdd.value = false
      })
    } else {
      naive.message.error("dddd")
    }
  })
  return false
}
</script>
